<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收藏</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="../../../css/mui.css" rel="stylesheet"/>
	<link href="../../../css/mui.min.css" rel="stylesheet"/>
	<link href="../../../css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="../../../css/app.css" rel="stylesheet"/>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 头部HEADER -->
<!-- 	<header class="app-header">
		<span onclick="jumpToIndex()">最新</span>
		&nbsp; &nbsp; 
		<b>足迹</b>
	</header> -->
	<!-- <header class="mui-bar mui-bar-nav mui-bar-transparent"> -->
	<header class="mui-bar mui-bar-nav">
		<span class="mui-icon mui-icon-back" 
			onclick="jumpToMy()"></span>
		<h1 class="mui-title">收藏列表</h1>
	</header>
	<!-- 头部HEADER -->
	
	<!-- 首页视频布局 -->
	<div class="app-video-bg" id="refresh">
	</div>
	<!-- 没有数据 -->
	<p id="nodata"></p>
	<br><br>
	<!-- 首页视频布局 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a> -->
		<a class="mui-tab-item mui-active" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>


<script src="../../../js/mui.js"></script>
<script src="../../../js/app.js"></script>
<script type="text/javascript">
	// mui.init({
	// 	//下拉、上拉刷新
 //        pullRefresh: {
 //            container: "#refresh",
 //            up: { //上拉加载
 //                height: 500, 
 //                callback: async function () { 
	// 				jumpToIndex();
 //                }
 //            }
 //        }
 //    });
	//自动加载
	(function($, owner) {
		getIndex(); 
	}(mui, window.app = {}));
	//获取列表
	function getIndex(){
		//屏幕宽度
		var cw = document.documentElement.clientWidth; 
		// //屏幕高度
		// var ch = document.documentElement.clientHeight; 
		var resIndex = getIndexCache(); //首页缓存 
		var resMarket = getMarketCache(); //库缓存
		var indexList = resIndex.list;
		var marketList = resMarket.list;
		// 整合首页和库视频
		if (indexList.length==0 && marketList.length==0) {
			h = '<br><button type="button" class="mui-btn mui-btn-block noDataBtn">没有收藏视频</button>';
			mui("#refresh")[0].innerHTML = h;
			mui.toast('没有收藏视频',{ 
				duration:'long', type:'div',
			});
			return
		}
		var h = '', vHeight, vTitle, viewType, 
			vs = new Array(), i, m;
		if (indexList.length > 0) {
			vs = indexList;
			for (i=0;i<vs.length;i++) {
				if (vs[i].collectUser!=0) {
					vHeight = Math.round(cw / 2 * vs[i].videoRatio);
					vTitle = getStrLimitNum(vs[i].videoTitle,6);
					h += '<div class="app-video-history" style="height:'+vHeight+'px;float:left;" onclick="jumpToMyCollectOneIndex('+vs[i].videoId+')">';
					h += '<video poster="'+vs[i].videoImg+'" name="media" height="'+vHeight+'" preload="auto" class="app-video-history-tag"><source src="'+vs[i].videoLink+'" type="video/mp4"></video>';
					h += '<div class="app-video-title"><span class="mui-icon mui-icon-home"></span>'+vTitle+'</div>';
					h += '</div>';
				}
			}
		}
		if (marketList.length > 0) {
			vs = marketList;
			for (m=0;m<vs.length;m++) {
				if (vs[m]!=0) {
					vHeight = Math.round(cw / 2 * vs[m].videoRatio);
					vTitle = getStrLimitNum(vs[m].videoTitle,6); 
					h += '<div class="app-video-history" style="height:'+vHeight+'px;float:left;" onclick="jumpToMyCollectOneMarket('+vs[m].videoId+')">';
					h += '<video poster="'+vs[m].videoImg+'" name="media" height="'+vHeight+'" preload="auto" class="app-video-history-tag"><source src="'+vs[m].videoLink+'" type="video/mp4"></video>';
					h += '<div class="app-video-title"><span class="mui-icon mui-icon-download"></span>'+vTitle+'</div>';
					h += '</div>';
				}
			}
		}
		mui("#refresh")[0].innerHTML = h;
	}
	//获取首页数据缓存
	function getIndexCache(){
		var resList = cacheGet(indexList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				ids: idstring
			};
		}
		return resList;
	}
	//获取库数据缓存
	function getMarketCache(){
		var resList = cacheGet(marketList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				ids: idstring
			};
		}
		return resList;
	}
</script>